<template>
  <div class="portrait-content">
    <div class="header-box clearfix">
      <div class="name-box">
        <icon-svg name="iconLoginUser"></icon-svg>
        <span>单用户画像</span>
      </div>
      <div class="user-box" v-if="show === 'tag'">
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="90px">
              <el-form-item prop="identifyTagId" label="唯一标识">
                <el-select v-model="editForm.identifyTagId">
                  <el-option label="---" value=""></el-option>
                  <el-option
                    v-for="item in idList"
                    :key="item.tagId"
                    :label="item.tagNm"
                    :value="item.tagId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="10">
            <el-input v-model="inputKey" placeholder="输入标识快速查询" @keyup.native.enter="setUserId">
              <el-button slot="append" @click="setUserId"><icon-svg name="iconSearch"></icon-svg></el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content-box">
      <content-mode v-if="show === 'mode'" @mode="setMode"></content-mode>
      <content-temp v-if="show === 'temp'" @mode="setMode" @temp="useTemp"></content-temp>
      <content-tag
        v-if="show === 'tag'"
        ref="contentTag"
        @mode="setMode"
        :identifyTagId="editForm.identifyTagId"
        :userId="userId"
      ></content-tag>
    </div>
  </div>
</template>

<script>
import contentMode from './content-mode-item'
import contentTemp from './content-temp-item'
import contentTag from './content-tag-item'
export default {
  components: {
    contentMode,
    contentTemp,
    contentTag
  },
  data() {
    return {
      show: 'mode',
      inputKey: '',
      editForm: {
        identifyTagId: ''
      },
      editFormRules: {
        identifyTagId: [{ required: true, message: '唯一标识不能为空', trigger: 'change' }]
      },
      userId: ''
    }
  },
  watch: {
    show(val) {
      if (val === 'tag') this.inputKey = this.userId
    }
  },
  created() {
    this.getIdList()
  },
  methods: {
    getIdList() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astData/import/allIdentifierTag'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.idList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearConfig() {
      this.$refs.contentTag.clearConfig()
    },
    setMode(mode) {
      this.show = mode
    },
    useTemp(json) {
      this.show = 'tag'
      this.$nextTick(() => {
        this.$refs.contentTag.addTag(JSON.parse(json))
      })
    },
    setUserId() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.userId = this.inputKey
          this.$nextTick(() => {
            this.$refs.contentTag.userIdChange()
          })
        }
      })
    },
    addItem(item) {
      if (this.show === 'tag') {
        this.$refs.contentTag.addTag([item.assetId])
      }
    }
  }
}
</script>

<style lang="scss">
.tag-portrait {
  .portrait-content {
    min-width: 1080px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10px;
    left: 0;
    margin-left: 340px;
    margin-right: 10px;
    .header-box {
      position: relative;
      height: 60px;
      z-index: 10;
      .name-box {
        font-size: 20px;
        font-weight: bold;
        line-height: 60px;
        .icon-svg {
          margin-right: 8px;
        }
      }
      .user-box {
        width: 600px;
        line-height: 40px;
        margin-left: 20px;
        .el-select {
          width: 100%;
        }
        .el-input {
          .el-input__inner {
            height: 35px;
            line-height: 35px;
            border-color: #455fbc;
          }
          .el-input-group__append {
            padding: 0 15px;
            border-color: #455fbc;
            background-color: #455fbc;
            svg {
              width: 20px;
              height: 20px;
              color: #fff;
            }
          }
        }
      }
    }
    .content-box {
      width: 100%;
      height: calc(100% - 60px);
      background-color: #f0f4f7;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}
</style>
